<template>
    <div class="app-content">
        <div class="tab">
            <div class="item" :class="{on:activeIndex === index && (showRecord || showStatus)}" v-for="(item,index) in tabList" :key="item" @click="switchTab(index)">
                <span class="txt">{{item}}</span>
                <view class="iconfont iconxiala"></view>
            </div>
        </div>
        <uni-popup type="top" :custom="true" :show="showRecord || showStatus" ref="pop" :zIndex="900" @change="closePop" width="100vw">
            <div class="dropdown_list" v-show="showRecord">
                <div class="item" v-for="(item,index) in option1" :key="item.value" @click="switchRecord(index)">
                    <span class="left" :class="{on: recordIndex === index}">{{item.text}}</span>
                    <view v-show="recordIndex === index" class="iconfont iconxuanze"></view>
                </div>
            </div>
            <div class="dropdown_list" v-show="showStatus">
                <div class="item" v-for="(item,index) in option2" :key="item.value" @click="switchStatus(index)">
                    <span class="left" :class="{on: statusIndex === index}">{{item.text}}</span>
                    <view v-show="statusIndex === index" class="iconfont iconxuanze"></view>
                </div>
            </div>
        </uni-popup>

        <div class="list" v-if="!list.loading">
            <template v-if="!$util.isEmpty(list.data)">
                <task-list v-for="(item,index) in list.data" :data="item" :key="index" @share="share" @goDetail="goDetail" />
            </template>
            <app-wrapper-empty v-else title="暂无数据内容" :is-empty="$util.isEmpty(list.data)" />

        </div>
        <share-poster ref="sharePoster" :type="shareType" />
        <!-- 添加按钮 -->
        <add-com-icon @add="addTask"></add-com-icon>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { list } from '@/mixins'
import AppWrapperEmpty from '@/components/App_wrapper_empty'
import TaskList from './components/taskList'
import { getTaskList, getTaskStatistics } from '@/api/getGuest'
import SharePoster from '@/pages/components/sharePoster'
import AddComIcon from '@/components/module/AddComIcon'
import uniPopup from '@/components/uni-popup/uni-popup'

export default {
	name: 'MyTask', // 我的任务
	mixins: [list],
	components: {
		TaskList,
		AppWrapperEmpty,
		SharePoster,
		AddComIcon,
		uniPopup
	},
	data() {
		return {
			option1: [{ text: '全部记录', value: 1, key: 'count_all' }, { text: '我发出的', value: 2, key: 'count_send' }, { text: '我收到的', value: 3, key: 'count_receive' }],
			option2: [{ text: '所有', value: 1 }, { text: '未到期', value: 2 }, { text: '已到期', value: 3 }, { text: '已完成', value: 4 }, { text: '未完成', value: 5 }, { text: '逾期', value: 6 }],
			shareType: 2,
			recordIndex: 0,
			statusIndex: 0,
			showRecord: false,
			showStatus: false,
			activeIndex: 0
		}
	},
	watch: {
		recordIndex() {
			this.resetList()
			this.init()
		},
		statusIndex() {
			this.resetList()
			this.init()
		}
	},
	computed: {
		...mapGetters(['getUser']),
		tabList() {
			return [this.option1[this.recordIndex].text, this.option2[this.statusIndex].text]
		}
	},
	onLoad() {
		this.init()
		this.getTaskStatistics()
	},
	onPullDownRefresh() {
		this.resetList()
		this.init().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (this.list.finished) {
			uni.showToast({
				title: '没有更多了',
				icon: 'none'
			})
			return
		}
		if (this.list.loading) {
			return
		}
		this.init()
	},
	methods: {
		init() {
			return getTaskList({
				type: this.option1[this.recordIndex].value,
				status: this.option2[this.statusIndex].value,
				limit: this.list.limit,
				page: this.list.page
			}).then(res => {
				this.completes(res)
				this.$nextTick(() => {
					this.showRecord = false
					this.showStatus = false
				})
			})
		},
		closePop(e) {
			if (!e.show) {
				this.showRecord = false
				this.showStatus = false
			}
		},
		switchTab(index) {
			if (index === 0) {
				this.showRecord = !this.showRecord
				this.showStatus = false
			} else {
				this.showStatus = !this.showStatus
				this.showRecord = false
			}
			this.activeIndex = index
		},
		switchRecord(index) {
			if (index === 0) {
				this.option2 = [{ text: '所有', value: 1 }, { text: '未到期', value: 2 }, { text: '已到期', value: 3 }, { text: '已完成', value: 4 }, { text: '未完成', value: 5 }, { text: '逾期', value: 6 }]
			}
			if (index === 1) {
				this.option2 = [{ text: '未到期', value: 2 }, { text: '已到期', value: 3 }]
			}
			if (index === 2) {
				this.option2 = [{ text: '已完成', value: 4 }, { text: '未完成', value: 5 }, { text: '逾期', value: 6 }]
			}
			this.recordIndex = index
			this.statusIndex = 0
		},
		switchStatus(index) {
			this.statusIndex = index
		},

		share(data) {
			this.shareType = data.type === 1 ? 3 : data.type === 2 ? 2 : 10
			this.$nextTick(() => {
				this.$refs.sharePoster.showMask(
					{
						id: data.content.id,
						url: true,
						work_id: data.work_id,
						urlString: `&work_id=${data.work_id}&share_user_id=${this.getUser.user_id}`
					},
					true
				)
			})
		},
		getTaskStatistics() {
			getTaskStatistics().then(res => {
				this.option1 = this.option1.map(i => ({
					...i,
					text: `${i.text}(${res.data[i.key]})`
				}))
			})
		},
		goDetail(val) {
			uni.navigateTo({
				url: `/pages/getGuest/taskDetail?work_id=${val.work_id}`
			})
		},
		// 新建任务
		addTask() {
			uni.navigateTo({
				url: `/pages/getGuest/addTask`
			})
		}
	}

}
</script>

<style lang="scss" scoped>
.app-content {
    padding-top: 100px;
}
.tab {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    z-index: 9999;
    display: flex;
    background-color: #fff;
    border-top: 0.5px solid #ddd;
	border-bottom:0.5px solid #ddd;
    .item {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        &.on {
            .txt,.iconxiala {
                color: #FF6900;
            }
        }
        .txt {
            font-size:28px;
            color:rgba(102,102,102,1);
            padding-right: 10px;
        }
    }
}
.dropdown_list {
    background-color: #fff;
    margin-top: 102px;
    .item {
        padding: 0 30px;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 0.5px solid #ddd;
        .left {
            &.on {
                color: #FF6900;
            }
        }
        .iconxuanze {
            color: #FF6900;
            font-size: 40px;
        }
    }
}
.iconxiala {
    color: #666;
	font-size: 24px;
}
</style>
